<script setup lang="ts">
// 批量添加计划
import {
  HighlightOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  CodeSandboxOutlined,
  SendOutlined,
  LineChartOutlined,
} from "@ant-design/icons-vue";
import BatchAddingProductsAccurateAudience
  from "~/contentScripts/views/wxt/BatchAddingProducts/BatchAddingProductsAccurateAudience.vue";
import BatchAddingProductsGoodsAcceleration
  from "~/contentScripts/views/wxt/BatchAddingProducts/BatchAddingProductsGoodsAcceleration.vue";
import BatchAddingProductsKeywordPromotion
  from "~/contentScripts/views/wxt/BatchAddingProducts/BatchAddingProductsKeywordPromotion.vue";
import BatchAddingProductsLaxin from "~/contentScripts/views/wxt/BatchAddingProducts/BatchAddingProductsLaxin.vue";
import BatchAddingProductsShangxinKuai
  from "~/contentScripts/views/wxt/BatchAddingProducts/BatchAddingProductsShangxinKuai.vue";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const emit = defineEmits([
  "update:visible",
  "close",
]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
// const visible = ref(false);
const components = ref([
  {
    title: '关键词推广',
    icon: HighlightOutlined,
    component: BatchAddingProductsKeywordPromotion,
    visible: false,
  },
  {
    title: '精准人群推广',
    icon: UserOutlined,
    component: BatchAddingProductsAccurateAudience,
    visible: false,
  },
  {
    title: '拉新快',
    icon: ShoppingCartOutlined,
    component: BatchAddingProductsLaxin,
    visible: false,
  },
  {
    title: '货品加速',
    icon: CodeSandboxOutlined,
    component: BatchAddingProductsGoodsAcceleration,
    visible: false,
  },
  {
    title: '上新快',
    icon: SendOutlined,
    component: BatchAddingProductsShangxinKuai,
    visible: false,
  },
  {
    title: '测新快',
    component: BatchAddingProductsShangxinKuai,
    icon: LineChartOutlined,
    visible: false
  }
]);
</script>

<template>
  <wxt-modal title="批量添加计划" :style="{
    top:'revert-layer',
  }" :visible="visible" @close="()=>{emit('close');emit('update:visible',false)}"
  >
    <div style="padding: 30px 0;">

      <a-grid>
        <a-row :gutter="[16,16]">
          <a-col :span="6" v-for="item in components" :key="item.title">
            <a-card hoverable style="text-align: center" @click="()=>{
            item.visible=true;
          }"
            >
              <component :is="item.icon" style="font-size: 40px"/>
              <p style="padding-top: 10px;font-weight: bold;">{{ item.title }}</p>
              <component :is="item.component" v-if="item.visible" :visible="item.visible" @close="item.visible=false"/>
            </a-card>
          </a-col>
        </a-row>
      </a-grid>
    </div>
  </wxt-modal>
</template>

<style scoped>

</style>
